{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">
    <style>
        .uploader-list {
            margin-left: -15px;
        }
 
        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }
 
        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }
 
        .uploader-list .handle i {
            margin-right: 5px;
        }
 
        .uploader-list .handle i:hover {
            cursor: pointer;
        }
 
        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="bitian">*</span>工单编号 </label>
        <div class="layui-input-block">
            <input type="text" name="number" value="" lay-verify="required" autocomplete="off" placeholder="工单编号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="bitian">*</span>产品 </label>
        <div class="layui-input-block">
            <select name="product_id" id="" lay-verify="required">
                <option value="0">请选择</option>
                {volist name="productList" id="product"}
                <option {if $product.id==$gongdan.product_id} selected {/if} value="{$product.id}">{$product.nums}-{$product.title}</option>
                {/volist}
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="bitian">*</span>计划数 </label>
        <div class="layui-input-block">
            <table class="layui-table" id="attribute">
                <thead>
                    <th>属性</th>
                    <th>数量</th>
                    <th></th>
                </thead>
                <tbody>
                    {volist name="gongdan.plan" key="k" id="item"}
                    <tr>
                        <td><input type="text" value="{$item.key}" name="attr[]"></td>
                        <td><input type="text" value="{$item.nums}" name="nums[]"></td>
                        {if $k > 1}
                        <td><button class="layui-btn layui-btn-xs layui-btn-danger remove" type="button">移除</button></td>
                        {/if}
                    </tr>
                    {/volist}
                </tbody>
            </table>
            <button class="layui-btn layui-btn-xs" id="add-line" type="button" onclick="addline()" style="margin-left: 40%;">新增</button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="bitian">*</span>计划时间 </label>
        <div class="layui-input-block">
            <div class="layui-inline" id="planTime">
                <div class="layui-input-inline">
                  <input type="text" name="begin_time" value="{$gongdan.begin_time}" id="begin_time" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                  <input type="text" name="end_time" value="{$gongdan.end_time}" id="end_time" class="layui-input" placeholder="结束日期">
                </div>
              </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态 </label>
        <div class="layui-input-block">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注 </label>
        <div class="layui-input-block">
            <textarea name="bz" placeholder="请输入" class="layui-textarea">{$gongdan.bz}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图纸 </label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">多图片上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                预览图：
                <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                    {volist name="gongdan.files" id="src"}
                    <div id="" class="file-iteme">
                        <div class="handle"><i class="layui-icon layui-icon-delete"></i></div>
                        <img style="width: 100px;height: 100px;" src="{$src}">
                        <div class="info"></div>'
                        <input type="hidden" name="imgs[]" value="{$src}">
                    </div>
                    {/volist}
                </div>
            </blockquote>
        </div>
    </div>
    <hr>
    <span style="margin-left: 5%;">生产任务</span>
    <button class="layui-btn layui-btn-xs save" type="button" style="float:right;margin-right: 5%;">保存为模板</button>
    <button class="layui-btn layui-btn-xs add-model" type="button" style="float:right;margin-right: 1%;">从模板中添加</button>
    <button class="layui-btn layui-btn-xs add-procedure" type="button" style="float:right;margin-right: 1%;">从工序中添加</button>
    <table class="layui-table" id="rkList" style="margin:10px auto;">
        <thead>
            <tr>
                <th>序号</th>
                <th>工序名称</th>
                <th>工序编号</th>
                <th>报工权限</th>
                <th>报工数配比</th>
                <th>计划数</th>
                <th>良品数</th>
                <th>不良品数</th>
                <th>不良品项列表</th>
                <th>计划开始时间</th>
                <th>计划结束时间</th>
                <th>实际开始时间</th>
                <th>实际结束时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>

    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter='ds' type="button" data-refresh="false">立即提交</button>
            <button class="layui-btn layui-btn-normal" type="button" onclick="var index1 = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index1);">返回</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    $(function(){
    })
    function addline(){
        var _html = '<tr>'+
                '<td><input type="text" name="attr[]"></td>'+
                '<td><input type="text" name="nums[]"></td>'+
                '<td><button class="layui-btn layui-btn-xs layui-btn-danger remove" type="button">移除</button></td>'+
            '</tr>';
        $('#attribute').find('tbody').append(_html);
    }
    $('body').on('click','.remove',function(){
        $(this).parent().parent().remove();
    })
    layui.use(['yznForm','form','jquery','laydate','upload'], function() {
        var yznForm = layui.yznForm;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var taskList = JSON.parse('{:json_encode($taskList)}');
        tList();
        yznForm.listen();
        laydate.render({ 
            elem: '#planTime', //开始时间和结束时间所在 input 框的父选择器
            format:'yyyy-MM-dd HH:mm:ss',
            type:"datetime",
            //设置开始日期、日期日期的 input 选择器
            range: ['#begin_time', '#end_time'], //数组格式为 layui 2.6.6 开始新增
            change:function(){
                $('.begin_time').html($('#begin_time').val());
                $('.end_time').html($('#end_time').val());
            }
        });
        upload.render({
            elem: '#test2'
            ,url: '{:url("upload")}'
            ,multiple: true
            ,before: function(obj){
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            ,done: function(res){
                layer.close(layer.msg());//关闭上传提示窗口
                //上传完毕
                $('#uploader-list').append(
                    '<div id="" class="file-iteme">' +
                    '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                    '<img style="width: 100px;height: 100px;" src='+ res.data.src +'>' +
                    '<div class="info">' + res.data.title + '</div>' +
                    '<input type="hidden" name="imgs[]" value="'+res.data.src+'"></div>'
                );
            }
        });
        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });
        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            $(this).parent().remove();  
        });

        
        var procedureList = JSON.parse('{:json_encode($procedureList)}');
        $('.add-procedure').on('click',function(){
            var _html = '<form style="margin-top:2em" class="layui-form" method="post">'+
                '<div class="layui-form-item">'+
                    '<label class="layui-form-label"><span class="bitian">*</span>工序 </label>'+
                    '<div class="layui-input-block">'+
                        '<select name="routeId" id="routeId" lay-filter="detail">'+
                            '<option value="0">请选择</option>';
                            for(var i in procedureList){
                                _html += '<option value="'+procedureList[i].id+'">'+procedureList[i].title+'</option>';
                            }
                _html +='</select>'+
                    '</div>'+
                '</div>'+
                ''+
                    '<div class="layui-input-block">'+
                        '<button class="layui-btn" lay-submit="" lay-filter="ds2" type="button" data-refresh="false">立即提交</button>'+
                        '<button class="layui-btn layui-btn-normal fanhui" type="button">返回</button>'+
                    '</div>'+
                ''+
            '</form>';
            layer.open({
                type: 1, 
                area: ['600px', '300px'],
                content: _html, //这里content是一个普通的String
                success:function(index,layero){
                    form.render('select');
                    index2 = layero;
                },
                end:function(){
                    tList();
                }
            });
        })
        var productRoute = JSON.parse('{:json_encode($productRoute)}');
        $('.add-model').on('click',function(){
            var _html = '<form style="margin-top:2em" class="layui-form" method="post">'+
                '<div class="layui-form-item">'+
                    '<label class="layui-form-label"><span class="bitian">*</span>工序 </label>'+
                    '<div class="layui-input-block">'+
                        '<select name="routeId" id="routeId" lay-filter="detail">'+
                            '<option value="0">请选择</option>';
                            for(var i in productRoute){
                                _html += '<option value="'+productRoute[i].id+'">'+productRoute[i].title+'</option>';
                            }
                _html +='</select>'+
                    '</div>'+
                '</div>'+
                ''+
                    '<div class="layui-input-block">'+
                        '<button class="layui-btn" lay-submit="" lay-filter="ds3" type="button" data-refresh="false">立即提交</button>'+
                        '<button class="layui-btn layui-btn-normal fanhui" type="button">返回</button>'+
                    '</div>'+
                ''+
            '</form>';
            layer.open({
                type: 1, 
                area: ['600px', '300px'],
                content: _html, //这里content是一个普通的String
                success:function(index,layero){
                    form.render('select');
                    index2 = layero;
                },
                end:function(){
                    tList();
                }
            });
        })
        form.on('submit(ds3)',function(data){
            var routeId = data.field.routeId;
            $.post('{:url("getProRouteDetail")}?id='+routeId,function(res){
                var data = res;
                for(var i in data){
                    taskList.push(data[i]);
                }
                layer.close(index2);
            },'json')
        })
        var total = 0;
        $('body').on('change','input[name="nums[]"]',function(){
            total = 0;
            $('input[name="nums[]"]').each(function(){
                total += parseInt($(this).val());
            })
            $('.total').html(total);
        })

        function tList()
        {
            var _html2 = '';
            var begin_time = $('#begin_time').val();
            var end_time = $('#end_time').val();
            total = 0;
            $('input[name="nums[]"]').each(function(){
                total += parseInt($(this).val());
            })
            if(taskList.length > 0){
                for(var i in taskList){
                    _html2 += '<tr><td><input type="hidden" name="procedureIds[]" value="'+taskList[i].id+'">'+(parseInt(i)+1)+'</td><td>'+taskList[i].title+'</td><td>'+taskList[i].nums+'</td><td>'+taskList[i].auth+'</td><td>'+taskList[i].ratio+'</td><td class="total">'+total+'</td><td>-</td><td>-</td><td>'+taskList[i].bad+'</td><td class="begin_time">'+begin_time+'</td><td class="end_time">'+end_time+'</td><td>-</td><td>-</td>';
                    _html2 += '<td><button type="button" class="layui-btn layui-btn-xs">编辑</button>'+
                        '<button type="button" class="layui-btn layui-btn-xs del-detail">删除</button>';
                    if(i == 0){
                        _html2 += '<button type="button" class="layui-btn layui-btn-xs layui-disabled">上移</button>';
                    }else{
                        _html2 += '<button type="button" class="layui-btn layui-btn-xs goup" key="'+i+'">上移</button>';
                    }
                    if(i == taskList.length-1){
                        _html2 += '<button type="button" class="layui-btn layui-btn-xs layui-disabled">下移</button>';
                    }else{
                        _html2 += '<button type="button" class="layui-btn layui-btn-xs godown" key="'+i+'">下移</button>';
                    }
                    _html2 += '</td></tr>';
                }
            }
            $('#rkList').find('tbody').html(_html2);
        }
        $('body').on('click','.godown',function(){
            var key = $(this).attr('key');
            var sourceIndex = parseInt(key)
            var targetIndex = parseInt(key)+1
            // 一行代码两边办事
            // splice 将目标元素替换并将原结果扔回来赋值给它
            taskList[sourceIndex] = taskList.splice(targetIndex, 1, taskList[sourceIndex])[0]
            tList();
        })
        $('body').on('click','.goup',function(){
            var key = $(this).attr('key');
            var sourceIndex = parseInt(key)
            var targetIndex = parseInt(key)-1
            // 一行代码两边办事
            // splice 将目标元素替换并将原结果扔回来赋值给它
            taskList[sourceIndex] = taskList.splice(targetIndex, 1, taskList[sourceIndex])[0]
            tList();
        })
        $('body').on('click','.del-detail',function(){
            layer.confirm('您确定要删除吗?',function(index){
                layer.msg('删除成功');
                var key = $(this).parent().attr('key');
                taskList.splice(key, 1);
                tList();
                layer.close(index);
            })
        })
    });
</script>
{/block}
    